<template>
  <div class="bg">
    <div id="btn" class="btn rubberBand" @click="doDetail"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    const pageURL = 'https://zt.diyring.cc/elephant/#/elephant'
    this.$ba.trackPageview(pageURL)
  },
  methods: {
    doDetail () {
      this.$ba.trackEvent({category: 'btn',action: 'click'})
      location.href = 'https://zt.diyring.cc/app.activity/history/xianjian2/?c=64664'
    }
  }
}
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  height: 100vh;
  background-image: url('../../images/pages/elephant/home.jpg');
  background-size: 100% 100%;
  position: relative;
  .btn {
    width: 380px;
    height: 130px;
    position: absolute;
    margin-left: 200px;
    bottom: 98px;
    z-index: 999;
    background-image: url('../../images/pages/elephant/btn_03.png');
    background-size: 100% 100%;
  }
  @keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.05, 0.8, 1);
    transform: scale3d(1.05, 0.8, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.05, 1);
    transform: scale3d(0.75, 1.05, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 0.85, 1);
    transform: scale3d(1.05, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  animation: rubberBand 2s infinite linear;
}
}
</style>